<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js基础学习笔记</title>
</head>
<style>
    .box{
        width: 2000px;
        height: 1500px;
        background-color: #0f0;
    }
    .to-top {
        position: fixed;
        right: 20px;
        bottom: 20px;
    }
</style>

<body>
    <button class="remove-btn">点我移除</button>
    <!--自定义属性需要添加data-前缀-->
    <div class="box" id="1" data-age="18">
        我是box
        <!--返回顶部-->
        <button class="to-top">
            返回顶部
        </button>
    </div>
    <script>
        //Date类的使用
        let date = new Date() //返回当前系统时间，多数情况下接受unix时间戳
        console.log(date);
        //动态添加类型
        const boxEle = document.querySelector(".box")
        boxEle.classList.add('demo')
        //自定义属性，不能通过实体对象获取，但是在h5之后，可以在dataset属性中访问自定义属性
        //小程序开发中可能会使用，对的类名字需要添加data-
        console.log(boxEle.dataset.age)
        //dom操作(增删克隆)
        //创建dom元素,createElement
        const titleEle = document.createElement('h2') //创建h2元素
        //设置h2元素的类名属性
        titleEle.className = 'title active'
        //添加到box中，append追加，添加到末尾
        titleEle.textContent = '我是标题'
        boxEle.append(titleEle)
        //移除box元素
        const removeBtnEle = document.querySelector('.remove-btn') //as HTMLButtonElement //获取按钮元素
        //设置点击事件
        removeBtnEle.onclick = () => {
            boxEle.remove() //移除对应的元素
        }
        //获取window对象的滚动长度
        var x = window.scrollx //获取windowx轴的长度
        var y = window.scrolly //获取windowy轴的长度
        //案例：点击按钮跳转到对应的位置
        const toTopBtn=document.querySelector('.to-top')
        //console.log(toTopBtn);
        /* toTopBtn.onclick=()=>{
           // alert('返回顶部!')
            window.scrollTo(0,0) //返回顶部
        } */
        //添加监听事件的另一种方式
       /*  toTopBtn.addEventListener('click',()=>{
            window.scrollTo(0,0) //返回顶部
        }) */
        //target vs currenttarget
        toTopBtn.addEventListener('click',(event)=>{
            event.preventDefault() //阻止默认点击事件
            event.stopPropagation() //阻止事件流
            window.scrollTo(0,0) //返回顶部
            console.log(event.target); //永远指向当前点击对象
            console.log(event.currentTarget);//事件冒泡的时候，会指向冒泡的元素
        })
        //evenTarget类常用方法
        const test=()=>{
            console.log('添加测试方法');
        }
        toTopBtn.addEventListener('click',test) //添加了点击事件
        setTimeout(()=>{
            console.log('test移除');
            toTopBtn.removeEventListener('click',test) //移除test事件
        },2000)
        //ES6语法转化数据Array.from(可迭代对象)
        //剩余参数(类似于c中的可变参数)
        function rest(...args){
            console.log(args);
        }
        rest("111","2222",1,3,444,{name:"chy",age:18})
        //柯里化：接受多个参数 -->变成单个参数,使用函数嵌套定义，函数内部返回函数
        function add(x,y,z){
            return x+y+z
        }
        //改造add为柯里化函数
        function kolia(x){
            return function(y){
                return function(z){
                    return x+y+z
                }
            }
        }
        console.log(kolia(10)(20)(30));
        //使用箭头函数进行优化
        function kolia1(x){
            return (y)=>{
                return (z)=>{
                    return x+y+z
                }
            }
        }
        //利用箭头规则，从内向外进行优化，第一步优化z
        function kolia2(x){
            return (y)=>{
                return z=>x+y+z
            }
        }
        //优化y
        function kolia3(x){
            return y=>z=>x+y+z
        }
     //最终版本
     const koliaFinal=x =>y =>z =>x+y+z
        console.log( koliaFinal(10)(20)(30));  
    </script>
</body>

</html>